<template>
	<view class="photoArt_box">
		<view class="photoArt_tit">
			<image mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/09b80f14-940d-47fa-833c-c21f1a7e4c19.webp"></image>
		</view>
		<!-- 名称部分 -->
		<view class="name_box">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/e2b05026-b0a0-427f-a674-5155aec3cf4f.webp" mode="heightFix"></image>
			<text>新郎：李绍辉</text>
		</view>
		<!-- 图片部分 -->
		<view class="picture_art">
			<view class="picture_art_ring"></view>
			<image :src="imgUrl" mode="aspectFill"></image>
		</view>
		<!-- 文字部分 -->
		<view class="picture_text">
			<textAnimate :text="textInfo"></textAnimate>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import textAnimate from '/components/textAnimate/textAnimate.vue'
	const textInfo = "我将|永远忠于自己|披星戴月奔向理想和你"
	import { ref } from 'vue'
	const imgUrl: String = ref('')
	const fileList = uni.getStorageSync('fileList')
	imgUrl.value = fileList[3].url
</script>

<style lang="scss" scoped>
.photoArt_box {
	padding: 0 120rpx;
	.photoArt_tit {
		height: 80rpx;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 10rpx;
		image {
			height: 100%;
			animation: photoArtTit 2s linear;
			@keyframes photoArtTit {
				0% {
					transform: scale(.5);
				}
				100% {
					transform: scale(1);
				}
			}
		}
	}
	.name_box {
		text-align: center;
		position: relative;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
		color: #d9b375;
		font-size: 32rpx;
		image {
			position: absolute;
			width: 312rpx;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			height: 100%;
			transform-origin: 0 50%;
			animation: nameImageAni 2s linear;
			@keyframes nameImageAni {
				0% {
					transform: translateX(-50%) rotateZ(90deg);
				}
				100% {
					transform: translateX(-50%) rotateZ(0deg);
				}
			}
		}
		text {
			transform-origin: 100% 50%;
			animation: nameTextAni 2s linear;
			@keyframes nameTextAni {
				0% {
					transform: rotateZ(-90deg);
				}
				100% {
					transform: rotateZ(0deg);
				}
			}
		}
	}
	.picture_art {
		position: relative;
		margin: auto;
		padding-top: 100%;
		.picture_art_ring {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border: 4rpx solid #d9b375;
			box-sizing: border-box;
			border-radius: 50%;
			transform-origin: 0 0;
			background-color: #fff;
			animation: ringAni 2s linear;
			@keyframes ringAni {
				0% {
					transform: rotateZ(90deg);
				}
				100% {
					transform: rotateZ(0deg);
				}
			}
		}
		image {
			width: calc(100% - 40rpx);
			height: calc(100% - 40rpx);
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			z-index: 1;
			border-radius: 50%;
			animation: imageAnimate 2s linear;
			transform-origin: 100% 0;
			@keyframes imageAnimate {
				0% {
					transform: rotateZ(-90deg);
				}
				100% {
					transform: rotateZ(0deg);
				}
			}
		}
	}
	.picture_text {
		text-align: center;
		color: #d9b375;
		padding: 15rpx 0;
		animation: textAnimate 2s linear;
		@keyframes textAnimate {
			0% {
				transform: scale(.5);
				opacity: 0;
			}
			100% {
				transform: scale(1);
				opacity: 1;
			}
		}
	}
}
</style>